<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园失物招领</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#10b981',
                        danger: '#ef4444',
                        warning: '#f59e0b',
                        dark: '#1f2937',
                        light: '#f9fafb',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                },
            }
        }
    </script>
</head>

<body class="min-h-screen text-dark bg-gray-50">
    <!-- 登录页面 -->
    <div id="login-page"
        class="min-h-screen flex flex-col items-center justify-center p-4 bg-gradient-to-br from-primary/10 to-secondary/10">
        <div class="w-full max-w-md bg-white rounded-2xl p-8 shadow-lg animate-fade-in">
            <div class="text-center mb-8">
                <div class="inline-block bg-primary/10 p-4 rounded-full mb-4">
                    <i class="fa fa-search text-3xl text-primary"></i>
                </div>
                <h1 class="text-2xl font-bold text-dark">校园失物招领</h1>
                <p class="text-gray-500 mt-2">帮你找回丢失的物品，归还捡到的宝贝</p>
            </div>

            <form id="login-form" class="space-y-6">
                <div class="form-field">
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-user text-gray-400"></i>
                        </div>
                        <input type="text" id="username" name="username"
                            class="block w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg form-input-focus smooth-transition"
                            placeholder="请输入用户名" value="testuser">
                    </div>
                    <div id="username-error" class="error-message"></div>
                </div>

                <div class="form-field">
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-lock text-gray-400"></i>
                        </div>
                        <input type="password" id="password" name="password"
                            class="block w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg form-input-focus smooth-transition"
                            placeholder="请输入密码" value="password">
                        <button type="button" id="toggle-password"
                            class="absolute inset-y-0 right-0 pr-3 flex items-center">
                            <i class="fa fa-eye text-gray-400"></i>
                        </button>
                    </div>
                    <div id="password-error" class="error-message"></div>
                </div>

                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input id="remember-me" name="remember-me" type="checkbox"
                            class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                        <label for="remember-me" class="ml-2 block text-sm text-gray-700">记住我</label>
                    </div>
                    <div class="text-sm">
                        <a href="#" id="forgot-password"
                            class="font-medium text-primary hover:text-primary/80 smooth-transition">忘记密码?</a>
                    </div>
                </div>

                <div id="login-error" class="hidden bg-red-50 text-red-700 p-3 rounded-lg text-sm mt-4"></div>

                <button type="submit" id="login-button"
                    class="w-full flex justify-center py-3.5 px-4 border border-transparent rounded-lg shadow-sm text-base font-medium text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary smooth-transition">
                    登录
                </button>
            </form>

            <div class="mt-6 text-center">
                <p class="text-sm text-gray-500">
                    还没有账号？ <a href="#" id="register-link"
                        class="font-medium text-primary hover:text-primary/80 smooth-transition">立即注册</a>
                </p>
            </div>
        </div>
    </div>

    <!-- 主应用页面 -->
    <div id="app" class="hidden min-h-screen flex flex-col">
        <!-- 导航栏 -->
        <nav class="bg-white shadow-md sticky top-0 z-30">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between h-16">
                    <div class="flex items-center">
                        <i class="fa fa-search text-2xl text-primary mr-2"></i>
                        <span class="text-xl font-bold">校园失物招领</span>
                    </div>
                    <div class="flex items-center">
                        <button id="user-profile" class="p-2 rounded-full hover:bg-gray-100 smooth-transition relative">
                            <i class="fa fa-user text-gray-600"></i>
                            <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-danger"></span>
                        </button>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 内容区域 -->
        <main class="flex-1 overflow-y-auto bg-gray-50 p-4 content-wrapper">
            <!-- 首页 - 仪表盘 -->
            <div id="dashboard" class="page-content p-4">
                <div class="mb-6">
                    <h2 class="text-xl font-bold mb-2">失物招领统计</h2>
                    <div class="grid grid-cols-2 gap-4">
                        <div id="current-lost-card" class="bg-white rounded-xl p-4 card-shadow clickable-card">
                            <div class="flex items-center">
                                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                                    <i class="fa fa-search text-primary text-xl"></i>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">当前寻物</p>
                                    <p class="text-2xl font-bold" id="current-lost-count">0</p>
                                </div>
                            </div>
                        </div>
                        <div id="current-found-card" class="bg-white rounded-xl p-4 card-shadow clickable-card">
                            <div class="flex items-center">
                                <div
                                    class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center mr-3">
                                    <i class="fa fa-hand-holding-usd text-secondary text-xl"></i>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">当前寻主</p>
                                    <p class="text-2xl font-bold" id="current-found-count">0</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-white rounded-xl p-4 card-shadow">
                            <div class="flex items-center">
                                <div class="w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center mr-3">
                                    <i class="fa fa-clipboard-check text-warning text-xl"></i>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">已找回</p>
                                    <p class="text-2xl font-bold" id="recovered-count">0</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-white rounded-xl p-4 card-shadow">
                            <div class="flex items-center">
                                <div class="w-12 h-12 rounded-full bg-danger/10 flex items-center justify-center mr-3">
                                    <i class="fa fa-percentage text-danger text-xl"></i>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">找回率</p>
                                    <p class="text-2xl font-bold" id="recovery-rate">0%</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mb-6">
                    <h2 class="text-xl font-bold mb-2">最近发布</h2>
                    <div class="space-y-4" id="recent-posts">
                        <!-- 最近发布的内容将通过JavaScript动态加载 -->
                    </div>
                </div>

                <div class="mb-6">
                    <h2 class="text-xl font-bold mb-2">月度统计</h2>
                    <div class="bg-white rounded-xl overflow-hidden card-shadow">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col"
                                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        月份</th>
                                    <th scope="col"
                                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        丢失数量</th>
                                    <th scope="col"
                                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        招领数量</th>
                                    <th scope="col"
                                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        已找回</th>
                                    <th scope="col"
                                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        找回率</th>
                                </tr>
                            </thead>
                            <tbody id="stats-table-body" class="bg-white divide-y divide-gray-200">
                                <!-- 统计表格数据将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 寻物页面 -->
            <div id="lost" class="page-content p-4 hidden">
                <div class="mb-4 flex items-center justify-between">
                    <h2 class="text-xl font-bold">寻找失物</h2>
                    <button id="add-lost-btn"
                        class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg smooth-transition">
                        <i class="fa fa-plus mr-1"></i> 发布寻物
                    </button>
                </div>

                <div class="mb-4">
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-search text-gray-400"></i>
                        </div>
                        <input type="text" id="lost-search"
                            class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg form-input-focus smooth-transition"
                            placeholder="搜索物品名称...">
                    </div>
                </div>

                <div class="space-y-4" id="lost-items">
                    <!-- 寻物列表将通过JavaScript动态加载 -->
                </div>
            </div>

            <!-- 寻主页面 -->
            <div id="found" class="page-content p-4 hidden">
                <div class="mb-4 flex items-center justify-between">
                    <h2 class="text-xl font-bold">失物招领</h2>
                    <button id="add-found-btn"
                        class="bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-4 rounded-lg smooth-transition">
                        <i class="fa fa-plus mr-1"></i> 发布招领
                    </button>
                </div>

                <div class="mb-4">
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-search text-gray-400"></i>
                        </div>
                        <input type="text" id="found-search"
                            class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg form-input-focus smooth-transition"
                            placeholder="搜索物品名称...">
                    </div>
                </div>

                <div class="space-y-4" id="found-items">
                    <!-- 寻主列表将通过JavaScript动态加载 -->
                </div>
            </div>

            <!-- 我的页面（包含通知和个人中心） -->
            <div id="my-page" class="page-content p-4 hidden">
                <div class="bg-white rounded-xl p-6 mb-6 card-shadow">
                    <div class="flex items-center mb-4">
                        <div
                            class="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center mr-4 overflow-hidden">
                            <img src="https://picsum.photos/200/200?random=1" alt="用户头像"
                                class="w-full h-full object-cover">
                        </div>
                        <div>
                            <h3 class="text-lg font-bold">张三</h3>
                            <p class="text-gray-500 text-sm">计算机科学与技术学院</p>
                            <p class="text-gray-500 text-sm">学号: 20210001</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-3 gap-4 text-center">
                        <div class="bg-gray-50 rounded-lg p-3 cursor-pointer hover:bg-gray-100 smooth-transition"
                            id="my-lost-tab">
                            <p class="text-gray-500 text-sm">发布寻物</p>
                            <p class="text-xl font-bold text-primary" id="my-lost-count">0</p>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-3 cursor-pointer hover:bg-gray-100 smooth-transition"
                            id="my-found-tab">
                            <p class="text-gray-500 text-sm">发布招领</p>
                            <p class="text-xl font-bold text-secondary" id="my-found-count">0</p>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-3 cursor-pointer hover:bg-gray-100 smooth-transition"
                            id="my-notifications-tab">
                            <p class="text-gray-500 text-sm">消息通知</p>
                            <p class="text-xl font-bold text-warning" id="unread-notification-count">3</p>
                        </div>
                    </div>
                </div>

                <!-- 我的发布和通知内容容器 -->
                <div class="bg-white rounded-xl overflow-hidden card-shadow mb-6">
                    <div class="border-b border-gray-100">
                        <div class="flex" id="my-tabs">
                            <button
                                class="tab-btn flex-1 py-3 px-4 text-center font-medium text-primary border-b-2 border-primary"
                                data-tab="my-posts">
                                我的发布
                            </button>
                            <button class="tab-btn flex-1 py-3 px-4 text-center font-medium text-gray-500"
                                data-tab="notifications">
                                消息通知
                            </button>
                        </div>
                    </div>

                    <!-- 我的发布内容 -->
                    <div id="my-posts" class="p-4">
                        <div class="mb-4 flex justify-between items-center">
                            <h3 class="font-medium">我的发布</h3>
                            <div class="flex space-x-2">
                                <button class="filter-btn px-3 py-1 text-sm rounded-full bg-primary/10 text-primary"
                                    data-filter="all">全部</button>
                                <button class="filter-btn px-3 py-1 text-sm rounded-full bg-gray-100 text-gray-500"
                                    data-filter="lost">寻物</button>
                                <button class="filter-btn px-3 py-1 text-sm rounded-full bg-gray-100 text-gray-500"
                                    data-filter="found">招领</button>
                            </div>
                        </div>
                        <div id="my-posts-container" class="space-y-3">
                            <!-- 我的发布内容将通过JavaScript动态加载 -->
                        </div>
                        <div class="text-center mt-4">
                            <button id="load-more-posts"
                                class="text-primary text-sm hover:text-primary/80 smooth-transition">
                                加载更多 <i class="fa fa-angle-down ml-1"></i>
                            </button>
                        </div>
                    </div>

                    <!-- 消息通知内容 -->
                    <div id="notifications" class="p-4 hidden">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="font-medium">消息通知</h3>
                            <button id="mark-all-read"
                                class="text-primary text-sm hover:text-primary/80 smooth-transition">
                                全部标为已读
                            </button>
                        </div>
                        <div id="notifications-container" class="space-y-3">
                            <!-- 通知内容将通过JavaScript动态加载 -->
                        </div>
                        <div class="text-center mt-4">
                            <button id="load-more-notifications"
                                class="text-primary text-sm hover:text-primary/80 smooth-transition">
                                加载更多 <i class="fa fa-angle-down ml-1"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 个人设置 -->
                <div class="bg-white rounded-xl overflow-hidden card-shadow">
                    <div class="p-4 border-b border-gray-100">
                        <h3 class="font-medium">个人设置</h3>
                    </div>
                    <div class="p-4 space-y-3">
                        <a href="#" class="flex items-center p-2 hover:bg-gray-50 smooth-transition">
                            <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3">
                                <i class="fa fa-user text-gray-500"></i>
                            </div>
                            <div class="flex-1">
                                <p class="font-medium">个人信息</p>
                                <p class="text-xs text-gray-500">修改头像、昵称等</p>
                            </div>
                            <i class="fa fa-angle-right text-gray-400"></i>
                        </a>
                        <a href="#" class="flex items-center p-2 hover:bg-gray-50 smooth-transition">
                            <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3">
                                <i class="fa fa-bell text-gray-500"></i>
                            </div>
                            <div class="flex-1">
                                <p class="font-medium">通知设置</p>
                                <p class="text-xs text-gray-500">消息提醒、声音设置</p>
                            </div>
                            <i class="fa fa-angle-right text-gray-400"></i>
                        </a>
                        <a href="#" class="flex items-center p-2 hover:bg-gray-50 smooth-transition">
                            <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3">
                                <i class="fa fa-cog text-gray-500"></i>
                            </div>
                            <div class="flex-1">
                                <p class="font-medium">通用设置</p>
                                <p class="text-xs text-gray-500">应用主题、隐私设置</p>
                            </div>
                            <i class="fa fa-angle-right text-gray-400"></i>
                        </a>
                        <button id="logout-btn"
                            class="flex items-center p-2 hover:bg-gray-50 smooth-transition w-full text-left">
                            <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3">
                                <i class="fa fa-sign-out text-gray-500"></i>
                            </div>
                            <div class="flex-1">
                                <p class="font-medium text-danger">退出登录</p>
                            </div>
                            <i class="fa fa-angle-right text-gray-400"></i>
                        </button>
                    </div>
                </div>
            </div>
        </main>

        <!-- 发布类型选择模态框 -->
        <div id="publish-type-modal"
            class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-2xl w-full max-w-md mx-4 card-shadow animate-fade-in">
                <div class="p-4 border-b border-gray-200 flex justify-center">
                    <h3 class="text-xl font-bold">选择发布类型</h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-2 gap-4">
                        <div class="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center hover:border-primary cursor-pointer smooth-transition"
                            id="publish-lost">

                            <h4 class="font-medium">发布寻物</h4>
                            <p class="text-gray-500 text-sm mt-1">寻找丢失的物品</p>
                        </div>
                        <div class="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center hover:border-secondary cursor-pointer smooth-transition"
                            id="publish-found">

                            <h4 class="font-medium">发布招领</h4>
                            <p class="text-gray-500 text-sm mt-1">归还捡到的物品</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 发布表单模态框 -->
        <div id="post-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-2xl w-full max-w-md mx-4 card-shadow animate-fade-in">
                <div class="p-4 border-b border-gray-200 flex justify-between items-center">
                    <h3 class="text-xl font-bold" id="modal-title">发布寻物</h3>
                    <button id="close-modal" class="text-gray-500 hover:text-gray-700">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                <form id="post-form" class="p-4 space-y-4">
                    <input type="hidden" id="post-type" value="lost">
                    <input type="hidden" id="edit-item-id" value="">
                    <div>
                        <label for="item-name" class="block text-sm font-medium text-gray-700 mb-1">物品名称</label>
                        <input type="text" id="item-name"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg form-input-focus smooth-transition"
                            required>
                    </div>
                    <div>
                        <label for="item-description" class="block text-sm font-medium text-gray-700 mb-1">物品描述</label>
                        <textarea id="item-description" rows="3"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg form-input-focus smooth-transition"
                            placeholder="请详细描述物品特征..."></textarea>
                    </div>
                    <div>
                        <label for="item-location" class="block text-sm font-medium text-gray-700 mb-1">丢失/捡到地点</label>
                        <input type="text" id="item-location"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg form-input-focus smooth-transition"
                            required>
                    </div>
                    <div>
                        <label for="contact-info" class="block text-sm font-medium text-gray-700 mb-1">联系方式</label>
                        <input type="text" id="contact-info"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg form-input-focus smooth-transition"
                            placeholder="请输入你的联系方式，方便对方联系" required>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">上传图片 (可选)</label>
                        <div id="upload-container" class="drop-area">
                            <i class="fa fa-cloud-upload text-3xl text-gray-400 mb-2"></i>
                            <p class="text-gray-500 mb-1">点击选择文件到此处</p>
                            <p class="text-xs text-gray-400">支持JPG, PNG格式，最大5MB</p>
                            <input type="file" accept="image/*" class="hidden" id="item-image">
                        </div>
                        <div id="image-preview" class="mt-2 hidden">
                            <img id="preview-img" class="w-32 h-32 object-cover rounded-lg" src="" alt="图片预览">
                        </div>
                    </div>
                    <button type="submit"
                        class="w-full py-3 px-4 bg-primary text-white font-medium rounded-lg hover:bg-primary/90 smooth-transition">
                        发布
                    </button>
                </form>
            </div>
        </div>

        <!-- 物品详情模态框 -->
        <div id="item-detail-modal"
            class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-2xl w-full max-w-md mx-4 card-shadow animate-fade-in">
                <div class="p-4 border-b border-gray-200 flex justify-between items-center">
                    <h3 class="text-xl font-bold" id="detail-title">物品详情</h3>
                    <button id="close-detail-modal" class="text-gray-500 hover:text-gray-700">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                <div class="p-4" id="detail-content">
                    <!-- 物品详情将通过JavaScript动态生成 -->
                </div>
                <div class="p-4 border-t border-gray-200 flex justify-end space-x-3">
                    <button id="contact-owner-btn"
                        class="px-4 py-2 bg-primary text-white font-medium rounded-lg hover:bg-primary/90 smooth-transition">
                        联系失主/拾主
                    </button>
                </div>
            </div>
        </div>

        <!-- 联系表单模态框 -->
        <div id="contact-modal"
            class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-2xl w-full max-w-md mx-4 card-shadow animate-fade-in">
                <div class="p-4 border-b border-gray-200 flex justify-between items-center">
                    <h3 class="text-xl font-bold">联系对方</h3>
                    <button id="close-contact-modal" class="text-gray-500 hover:text-gray-700">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                <form id="contact-form" class="p-4 space-y-4">
                    <input type="hidden" id="contact-item-id">
                    <div>
                        <label for="contact-message" class="block text-sm font-medium text-gray-700 mb-1">留言内容</label>
                        <textarea id="contact-message" rows="4"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg form-input-focus smooth-transition"
                            placeholder="请输入你想对对方说的话..."></textarea>
                    </div>
                    <button type="submit"
                        class="w-full py-3 px-4 bg-primary text-white font-medium rounded-lg hover:bg-primary/90 smooth-transition">
                        发送消息
                    </button>
                </form>
            </div>
        </div>


        <!-- 底部导航栏 -->
        <nav class="bg-white border-t border-gray-200 fixed bottom-0 left-0 right-0 z-40">
            <div class="flex justify-around">
                <a href="#" class="nav-item flex-1 flex flex-col items-center py-2 px-2 text-center nav-active"
                    data-page="dashboard">
                    <i class="fa fa-home text-xl"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="#" class="nav-item flex-1 flex flex-col items-center py-2 px-2 text-center nav-inactive"
                    data-page="lost">
                    <i class="fa fa-search text-xl"></i>
                    <span class="text-xs mt-1">寻物</span>
                </a>
                <a href="#" id="nav-publish" class="nav-publish flex items-center justify-center">
                    <i class="fa fa-plus text-2xl"></i>
                </a>
                <a href="#" class="nav-item flex-1 flex flex-col items-center py-2 px-2 text-center nav-inactive"
                    data-page="found">
                    <i class="fa fa-hand-paper-o text-xl"></i>
                    <span class="text-xs mt-1">寻主</span>
                </a>
                <a href="#"
                    class="nav-item flex-1 flex flex-col items-center py-2 px-2 text-center nav-inactive relative"
                    data-page="my-page">
                    <i class="fa fa-user text-xl"></i>
                    <span
                        class="absolute top-1 right-1/2 transform translate-x-1/2 h-4 w-4 rounded-full bg-danger text-white text-xs flex items-center justify-center">3</span>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>
        </nav>
    </div>

    <script src="data.js"></script>
    <script src="app.js"></script>
</body>

</html>